import React,{useEffect} from 'react'
import {useDispatch,useSelector} from 'react-redux'
export default function ShopCart() {
  const dispatch=useDispatch()
  useEffect(()=>{
    dispatch({type:'getShopcartListAsync'})
  },[])
  const list=useSelector((state)=>{
    return state.list
  })

  const changeNum=(_id,n)=>{
    dispatch({type:'changeNumAsync',_id,n})
  }
  const checkedProduct=(_id)=>{
    dispatch({type:'checkProductsAsync',_id})
  }
  return (
    <div>
       <table>
          <thead>
            <tr>
              <td>编号</td>
              <td>名称</td>
              <td>价格</td>
              <td>数量</td>
              <td>小计</td>
            </tr>
          </thead>
          <tbody>
              {
                list.map((item,index)=><tr key={item._id}>
                  <td>
                    <input type='checkbox' checked={item.checked} onChange={()=>{checkedProduct(item._id)}}></input>
                  </td>
                  <td>{item.name}</td>
                  <td>{item.price}</td>
                  <td>
                    <button onClick={()=>{changeNum(item._id,-1)}}>-</button>
                    <span>{item.num}</span>
                    <button onClick={()=>{changeNum(item._id,1)}}>+</button>
                  </td>
                  <td>{item.num*item.price}</td>
                </tr>)
              }
          </tbody>
       </table>
    </div>
  )
}
